<html>

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <link rel="Bookmark" href="__PUB__/ico/bitbug_favicon.ico">
    <link rel="Shortcut Icon" href="__PUB__/ico/bitbug_favicon.ico" />
    <!--标准mui.css-->
    <link rel="stylesheet" href="__INDEX__/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" href="__INDEX__/css/footer.css">
    <script src="__INDEX__/js/vue.min.js"></script>
    <script src="__INDEX__/index/js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="__INDEX__/index/css/swiper-4.3.5.min.css">
    <script type="text/javascript" src="__INDEX__/index/js/swiper-4.3.5.min.js"></script>
    <script src="__INDEX__/vue-resource-1.3.4.js"></script>

    <link rel="stylesheet" href="https://cdn.bootcss.com/layer/2.1/skin/layer.css">
    <script src="https://cdn.bootcss.com/layer/2.1/layer.js"></script>
</head>
<style>
    .zj{height: 186px}
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateY(120px);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 0.1s ease;
    }
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <div id="app" v-cloak >
        <div class="swiper-container">
            <div class="swiper-wrapper" style="height: 200px;">
                {foreach $broadcasts as $broadcast}
                <img class="swiper-slide" src="__UPL__/{$broadcast->broad_img}">
                {/foreach}
            </div>
            <div class="swiper-pagination" style="width: 20%;"></div>
        </div>

        <div class="mui-card" style="margin:auto">
            <ul class="mui-table-view mui-grid-view mui-grid-9">

                {foreach $types as $type}
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4" id="wd20" onclick="window.location.href = '{:url('/lType',['id' => $type->type_id])}'">
                    <a href="#">
                        <span id="top5"><img src="__UPL__/{$type->type_img}" width="30px" height="25px" /></span>
                        <div class="mui-media-body" id="color30">{$type->type_name}</div>
                    </a>
                </li>
                {/foreach}

            </ul>
        </div>
        <div class="ht1"></div>
        <div class="mui-content" style="background-color: #FFFFFF;margin: 10px;padding-top: 0px;">
            <h5 class="line-heightwsf">推荐频道</h5>
            <div>
                <img src="__INDEX__/images/news_img2.png" height="198px" class="img-responsive el-wsf2" />
                <span class="el-wsf"><img src="__INDEX__/images/news_img1.png" onclick="window.location.href='{:url('/iNews')}'" class="img-responsive mr2-wsf" /></span>
            </div>
        </div>
        <div class="ht1"></div>

        <transition-group>
            <div class="mui-content"style="background-color: #FFFFFF;padding-top: 0px;" v-for="(good, key) in goods"
                :key="key">

                <div class="mui-content-padded" id="main">
                    <div class="mui-card-header mui-card-media">
                        <img class="user_img" v-bind:src="good.user_face_img" v-on:click="urlToUser( good.goods_uid )">
                        <span class=" user_name-wsf"><img v-bind:src="uploads + '/' + good.member_img" class="volume-wsf"
                                width="24px" height="24px" />
                            <span class="mg24 cl" style="margin-left: 31px;position:relative;top:5px;">{{ good.user_name | changename }}</span>
                        </span>

                        <button type="button" id="pad0" class="mui-btn mui-btn-outlined" v-on:click="flower( good.goods_uid, this)"><img
                                src="__INDEX__/images/gz@2x.png" width="11px" height="10px" /> <span :class="good.goods_uid"
                                style="color:#C39772">{{ good.goods_uid | isFlower }}</span>
                        </button>


                        <button type="button" v-on:click="collect( good.goods_id, this )" id="pad0" class="mui-btn mui-btn-outlined"><img
                                src="__INDEX__/images/sc@2x.png" width="11px" height="10px" /> <span :class="good.goods_id + 'col'" style="color:#C39772">{{
                                good.goods_id | isCollect }}</span>
                        </button>

                    </div>


                    <p class="mg0-wsf" v-on:click="urlToEnter(good.goods_id)">
                        <img :src=" good.goods_imgs | firstImg " data-preview-src="" style="width:50%;height:180px;padding:0px 1px;"
                            data-preview-group="1" />
                        <img :src=" good.goods_imgs | secondImg " data-preview-src="" style="width:50%;height:180px;float:right;padding:0px 1px;"
                            data-preview-group="1" />
                    </p>
                    <p class="mg0-wsf"><img src="__INDEX__/images/muwu.jpg" data-preview-src="" data-preview-group="1"
                            style="display: none;" /></p>
                    <p class="mg0-wsf"><img src="__INDEX__/images/shuijiao.jpg" data-preview-src="" data-preview-group="1"
                            style="display: none;" /></p>
                    <p class="op-wsf">
                        {{ good.goods_name }}
                    </p>
                    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" style="margin-top: -40px;border-bottom: 1px solid #f3f3f3;">
                        <li class="mui-table-view-cell" id="pad0">
                            <div class="mui-table">
                                <div class="mui-table-cell mui-col-xs-10">
                                    <h4 class="mui-ellipsis"><img src="__INDEX__/images/by@2x.png" width="20px" height="20px" />&nbsp;<img
                                            src="__INDEX__/images/bt@2x.png" width="20px" height="20px" />&nbsp;<img
                                            src="__INDEX__/images/yz@2x.png" width="20px" height="20px" /></h4>
                                    <h5>价格区间：RMB {{ good.goods_min_price }} ~&nbsp;{{ good.goods_max_price }}</h5>
                                    <p class="mui-h6 mui-ellipsis">距离结束:&nbsp;

                                        <span :id="good.goods_id" class="settime" :endTime="good.expriy_time | expireTime"></span>

                                    </p>
                                </div>
                                <div class="mui-table-cell mui-col-xs-5 mui-text-right">
                                    <span class="mui-h5">
                                        <img src="__INDEX__/images/see@2x.png" width="19px" height="17px" />&nbsp;<span
                                            class="top3">{{ good.goods_fav }}</span>&nbsp;
                                        <img src="__INDEX__/images/dzx@2x.png" width="19px" height="17px" />&nbsp;<span
                                            class="top3">{{ good.goods_collect }}</span>
                                    </span>

                                    <button type="button" v-on:click="urlToEnter(good.goods_id)" style="margin-top: 5px;margin-bottom: 10px;background-color: #C39772;border: none;"
                                        class="mui-btn mui-btn-outlined"><img src="__INDEX__/images/yj@2x.png" width="13px"
                                            height="14px" /> <span class="wt-wsf2">参与议价</span>
                                    </button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </transition-group>
        <div class="mui-content" style="background-color: #FFFFFF;padding-top: 0px;min-height:100px;"></div>

    </div>

    <div class="mui-card" style="margin:auto;bottom: 0px;position: fixed; width: 100%;">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4" id="wd20" onclick="window.location.href='{:url('/')}'">
                <a href="#">
                    <span  ><img src="__INDEX__/images/sy@2x.png" width="20px" height="20px"/></span>
                    <div class="mui-media-body" style="margin-top:6px;">首页</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4" id="wd20" onclick="window.location.href='{:url('/iTypes')}'">
                <a href="#"   >
                    <span  ><img src="__INDEX__/images/fl@2x.png" width="20px" height="20px"/></span>
                    <div class="mui-media-body" style="margin-top:6px;">分类</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4" id="wd20" onclick="window.location.href='{:url('/iGoods')}'">
                <a href="#"    style="height: 50px;">
                    <span><img src="__INDEX__/images/fb.png" width="50px" height="36px"/></span>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4" id="wd20" onclick="window.location.href='{:url('/iMessage')}'">
                <a href="#">
                    <span><img src="__INDEX__/images/xx@2x.png" width="20px" height="20px"/></span>
                    <div class="mui-media-body" style="margin-top:6px;">消息</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4" id="wd20"  onclick="window.location.href='{:url('/iMyself')}'">
                <a href="#">
                    <span  ><img src="__INDEX__/images/wd@2x.png" width="20px" height="20px"/></span>
                    <div class="mui-media-body" style="margin-top:6px;">我的</div>
                </a>
            </li>
        </ul>
    </div>
    <script src="__INDEX__/com.js"></script>
</body>
<script>



    var filePath = "{$filePath}";
    var url = "{:config('qiniu')['qiniuUrl']}"
    var getDataUrl = "{:url('/getData')}"
    var uploads = "{$viewRepStr}"

    var vm = new Vue({
        el: '#app',

        created() {
            this.getList()
        },
        data: {
            url: url,
            uploads: uploads,
            goods: [],
            collects: [],
            flows: [],
            getDataUrl: getDataUrl
        },
        methods: {

            getList() {
                this.$http.get(this.getDataUrl).then(result => {
                    var getData = JSON.parse(result.bodyText)
                    this.collects = getData.collects,
                    this.flows = getData.flows,
                    this.goods = getData.goods
                })
            },
            urlToEnter(num) {
                var addr = "{:url('/detail',['id' => 'addId'])}"
                addr = addr.replace('addId', num)
                window.location.href = addr
            },
            // urlToUser
            urlToUser(id) {
                var userAddr = "{:url('/iStore',['id' => 'userId'])}"
                userAddr = userAddr.replace('userId', id)
                window.location.href = userAddr
            },
            // collect
            collect(id, obj) {
                var url = "{:url('/collect')}"
                var className = '.' + id + 'col'


                $.post(url, {
                    id: id
                }, (res) => {
                    if (res.state == 'success') {
                        $(className).html('取消收藏')
                    } else if (res.state == 'error') {
                        $(className).html('收藏')
                    }
                }, 'json')
            },

            // flow
            flower(id, obj) {
                var url = "{:url('/flower')}"
                var className = '.' + id

                console.log(className)

                $.post(url, {
                    id: id
                }, (res) => {
                    if (res.state == 'flow') {
                        layer.msg(res.msg)
                        $(className).html('取消关注')
                    } else if (res.state == 'unflow') {
                        layer.msg(res.msg)
                        $(className).html('关注')
                    }
                }, 'json')
            }
        },
        filters: {

            firstImg(input) {
                var firstImgAdd = filePath + '/' + input.split(',')[0]
                return firstImgAdd
            },
            secondImg(input) {
                var secondImgAdd = filePath + '/' + input.split(',')[1]
                return secondImgAdd
            },

            expireTime(input) {
                input = parseInt(input + '000')
                var time = format(input)
                return time
            },

            test(input) {
              

            },
            changename(input){
                if (input.length > 8){
                    input = input.substr(0,8) + '...'
                }
                return input
            },

            // 是否关注
            isFlower(input) {

                var msg = ''
              
                if (arrHasValue(input, vm._data.flows)) {
                    msg = '取消关注'
                } else {
                    msg = '关注'
                }
              
                return msg
            },

            // 是否收藏
            isCollect(input) {
                var msg = ''
                if (arrHasValue(input, vm._data.collects)) {
                    msg = '取消收藏'
                } else {
                    msg = '收藏'
                }
                return msg
            }
        }
    })

    var num = 3
    window.onscroll = function () {

        // alert(vm._data.goods.length)
        var len = vm._data.goods.length
        console.log(len)
        if (len < 2){
            return
        }

        //监听事件内容
        if (getScrollHeight() == getWindowHeight() + getDocumentTop()) {
            var url = "{:url('/down')}"
            $.post(url, {

                'num': num
            }, function (data) {



                // console.log(num)
                if (data.state == 'error') {
                    alert(data.msg)
                    location.href = "{:url('/payIndex')}"
                    return
                }
                if (data.goods == 0) {

                    layer.msg('数据到底了')
                    return
                }

                for (x in data.goods){
                    vm._data.goods.push(data.goods[x])
                }

                // console.log(vm._data.goods)
                // console.log(data)
                num+=3;
                // console.log(num)


            }, 'json')

        }
    }

    $(function () {
        updateEndTime();
    });

    window.onload = function() {
        var mySwiper = new Swiper ('.swiper-container', {
            autoplay: true,//可选选项，自动滑动
            direction: 'horizontal',
            loop: true,
            autoplay:{
                disableOnInteraction: false,
            },

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })
    }

</script>

</html>